<template>
  <div class="stock-list">
    <div class="header">
      <h1>股票搜索</h1>
      <div class="search-bar">
        <el-input
          v-model="searchQuery"
          placeholder="搜索股票名称或代码"
          prefix-icon="el-icon-search"
          clearable
          @clear="handleSearch"
          @input="handleSearch"
        />
      </div>
    </div>

    <div class="content">
      <div class="filter-section">
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="全部" name="all"></el-tab-pane>
          <el-tab-pane label="上证" name="sh"></el-tab-pane>
          <el-tab-pane label="深证" name="sz"></el-tab-pane>
          <el-tab-pane label="创业板" name="cyb"></el-tab-pane>
        </el-tabs>

        <div class="quick-filters">
          <el-tag
            v-for="tag in quickFilters"
            :key="tag.value"
            :type="tag.type"
            effect="plain"
            @click="handleQuickFilter(tag)"
          >
            {{ tag.label }}
          </el-tag>
        </div>
      </div>

      <div class="stock-table">
        <el-table
          :data="filteredStocks"
          style="width: 100%"
          :row-class-name="tableRowClassName"
          @row-click="handleRowClick"
        >
          <el-table-column prop="name" label="股票名称" min-width="120">
            <template slot-scope="scope">
              <div class="stock-name">
                <span>{{ scope.row.name }}</span>
                <span class="stock-code">{{ scope.row.code }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="price" label="最新价" width="120">
            <template slot-scope="scope">
              <span :class="['price', scope.row.change >= 0 ? 'up' : 'down']">
                {{ scope.row.price }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="change" label="涨跌幅" width="120">
            <template slot-scope="scope">
              <span :class="['change', scope.row.change >= 0 ? 'up' : 'down']">
                {{ scope.row.change >= 0 ? '+' : '' }}{{ scope.row.change }}%
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="volume" label="成交量" width="120">
            <template slot-scope="scope">
              {{ formatVolume(scope.row.volume) }}
            </template>
          </el-table-column>
          <el-table-column prop="amount" label="成交额" width="120">
            <template slot-scope="scope">
              {{ formatAmount(scope.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120" fixed="right">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                @click.stop="addToWatchList(scope.row)"
                v-if="!isInWatchList(scope.row)"
              >
                加入自选
              </el-button>
              <el-button
                type="text"
                size="small"
                @click.stop="removeFromWatchList(scope.row)"
                v-else
              >
                移除自选
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'StockList',
  data() {
    return {
      searchQuery: '',
      activeTab: 'all',
      currentPage: 1,
      pageSize: 10,
      total: 100,
      quickFilters: [
        { label: '涨幅榜', value: 'up', type: 'danger' },
        { label: '跌幅榜', value: 'down', type: 'success' },
        { label: '成交额', value: 'amount', type: 'info' },
        { label: '换手率', value: 'turnover', type: 'warning' }
      ],
      stocks: [
        {
          name: '贵州茅台',
          code: '600519',
          price: '1,850.00',
          change: 2.34,
          volume: 123456,
          amount: 123456789,
          exchange: 'sh'
        },
        {
          name: '宁德时代',
          code: '300750',
          price: '420.50',
          change: 1.89,
          volume: 98765,
          amount: 98765432,
          exchange: 'sz'
        },
        {
          name: '中国平安',
          code: '601318',
          price: '45.67',
          change: -0.56,
          volume: 456789,
          amount: 456789123,
          exchange: 'sh'
        },
        {
          name: '比亚迪',
          code: '002594',
          price: '280.30',
          change: 3.45,
          volume: 234567,
          amount: 234567890,
          exchange: 'sz'
        }
      ],
      watchList: [] // 这里应该从后端或本地存储获取
    }
  },
  computed: {
    filteredStocks() {
      let result = [...this.stocks]
      
      // 搜索过滤
      if (this.searchQuery) {
        const query = this.searchQuery.toLowerCase()
        result = result.filter(stock => 
          stock.name.toLowerCase().includes(query) || 
          stock.code.includes(query)
        )
      }
      
      // 交易所过滤
      if (this.activeTab !== 'all') {
        result = result.filter(stock => stock.exchange === this.activeTab)
      }
      
      return result
    }
  },
  methods: {
    handleSearch() {
      this.currentPage = 1
      // TODO: 调用后端搜索接口
    },
    handleTabClick() {
      this.currentPage = 1
      // TODO: 根据交易所获取数据
    },
    handleQuickFilter(filter) {
      // TODO: 实现快速筛选逻辑
      console.log('Quick filter:', filter)
    },
    handleSizeChange(val) {
      this.pageSize = val
      // TODO: 重新获取数据
    },
    handleCurrentChange(val) {
      this.currentPage = val
      // TODO: 重新获取数据
    },
    handleRowClick(row) {
      this.$router.push(`/stock/${row.code}`)
    },
    isInWatchList(stock) {
      return this.watchList.some(item => item.code === stock.code)
    },
    addToWatchList(stock) {
      // TODO: 调用后端接口添加自选
      this.watchList.push(stock)
      this.$message.success('已添加到自选股')
    },
    removeFromWatchList(stock) {
      // TODO: 调用后端接口移除自选
      const index = this.watchList.findIndex(item => item.code === stock.code)
      if (index !== -1) {
        this.watchList.splice(index, 1)
        this.$message.success('已从自选股移除')
      }
    },
    tableRowClassName({row}) {
      return row.change >= 0 ? 'up-row' : 'down-row'
    },
    formatVolume(volume) {
      if (volume >= 100000000) {
        return (volume / 100000000).toFixed(2) + '亿'
      } else if (volume >= 10000) {
        return (volume / 10000).toFixed(2) + '万'
      }
      return volume
    },
    formatAmount(amount) {
      if (amount >= 100000000) {
        return (amount / 100000000).toFixed(2) + '亿'
      } else if (amount >= 10000) {
        return (amount / 10000).toFixed(2) + '万'
      }
      return amount
    }
  }
}
</script>

<style scoped>
.stock-list {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header h1 {
  font-size: 24px;
  color: #303133;
  margin: 0;
}

.search-bar {
  width: 300px;
}

.content {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.1);
  padding: 20px;
}

.filter-section {
  margin-bottom: 20px;
}

.quick-filters {
  margin-top: 16px;
  display: flex;
  gap: 12px;
}

.quick-filters .el-tag {
  cursor: pointer;
}

.stock-table {
  margin-top: 20px;
}

.stock-name {
  display: flex;
  flex-direction: column;
}

.stock-code {
  font-size: 12px;
  color: #909399;
}

.price, .change {
  font-weight: 500;
}

.price.up, .change.up {
  color: #f56c6c;
}

.price.down, .change.down {
  color: #67c23a;
}

.el-table .up-row {
  background-color: #fef0f0;
}

.el-table .down-row {
  background-color: #f0f9eb;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>